<%@ page import="com.party.core.model.system.TargetType" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="../include/tag.jsp" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>${audio == null ? '添加' : '编辑'}音频</title>
    <%@include file="../include/commonFile.jsp" %>
    <link rel="stylesheet" href="${ctx}/css/common/list.css">
    <link rel="stylesheet" href="${ctx}/css/ui/activity/publish_form.css">
    <style type="text/css">
        .styles-body li {
            position: relative;
            display: inline-block;
            background: #fff;
            width: 1.5rem;
            height: 1.5rem;
            margin: .1rem
        }
    </style>
</head>
<body>
<!--头部-->
<%@include file="../include/header.jsp" %>
<div class="index-outside">
    <%@include file="../include/sidebar.jsp" %>
    <!--内容-->
    <section>
        <div class="section-main">
            <!-- 正文请写在这里 -->
            <div class="add-form-content">
                <form id="myForm" class="layui-form mt20" method="post" action="${ctx}/audio/save.do">
                    <input type="hidden" name="id" value="${audio.id}"/>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">音频类型<span class="f-verify-red">*</span></label>
                            <div class="layui-input-inline">
                                <select name="type" lay-verify="type" lay-filter="type">
                                    <option value="">众筹背景乐</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">音频名称<span class="f-verify-red">*</span></label>
                        <div class="layui-input-block">
                            <input type="text" name="audioTitle" style="width: 42%;" maxlength="40"  lay-verify="audioTitle" placeholder="音频名称"
                                   class="layui-input" value="${audio.audioTitle}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">音频文件<span class="f-verify-red">*</span></label>
                        <div class="cover-content">
                            <div class="layui-input-inline">
                                <input type="text" id="audioUrl" name="audioUrl" class="layui-input"
                                       lay-verify="audioUrl" value="${audio.audioUrl}" readonly/>
                            </div>
                            <div class="u-single-upload">
                                <input type="file" class="u-single-file" id="audioFile" name="audioFile"> <span
                                    class="u-single-upload-icon">+上传</span>
                            </div>
                            <div class="form-word-aux">.mp3文件</div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <a href="javascript:void(0)" class="layui-btn layui-btn-danger" lay-submit lay-filter="*">立即提交</a>
                            <a href="javascript:history.back();" class="layui-btn layui-btn-primary">取消</a>
                        </div>
                    </div>
                </form>
            </div>
        </div><!--底部-->
        <%@include file="../include/footer.jsp" %>
    </section>
</div>
<script type="text/javascript" src="${ctxStatic}/cos-js-sdk-v4-master/dist/cos-js-sdk-v4.js"></script>
<script type="text/javascript" src="${ctx}/script/upload/cosUploadUtil.js"></script>
<script>
    $(function () {
        var cosUtil = new CosUtil({
            mainFolder: "/audio/",
            bucketType: 1,// 0: 图片, 1: 文件
            insertOnly: 0,//insertOnly==0 表示允许覆盖文件 1表示不允许
            onProgress: function (file, ret) {

            }
        }).init();


        layui.use(['form'], function () {
            var form = layui.form;

            //自定义验证规则
            form.verify({
                audioTitle: function (value) {
                    if (value == "") {
                        return '请填写名称';
                    } else {
                        if(value.length>40){
                            return '音频名称长度不能超过40';
                        }
                        var audioId = $("[name=id]").val()
                        if (!verifyAudioTitle(value, audioId)) {
                            return '音频名称已存在'
                        }
                    }
                },
                audioUrl: function (value) {
                    var regex = /^[^\s]+$/;
                    if (value == "") {
                        return "音频文件不能为空";
                    } else if (!regex.test(value)) {
                        return "音频文件不能包含空格";
                    }
                }
            });

            //监听提交
            form.on('submit', function (data) {
                txz.submitObject(data.elem, function (callBack) {
                    var action = $("#myForm").attr("action");
                    $.post(action, $('#myForm').serialize(), function (res) {
                        typeof callBack === 'function' && callBack();
                        if (res.success) {
                            util.layerMsgSuccess("提交成功", function () {
                                location.href = "${ctx}/audio/audioList.do";
                            });
                        } else {
                            util.layerMsgError("提交失败")
                        }
                    });
                });
                return false;
            });

            form.render('radio');


            $('#audioFile').change(function () {

                var audioTitle = $("[name=audioTitle]").val();
                audioTitle = $.trim(audioTitle);
                if (!util.isValid(audioTitle)) {
                    util.layerMsgError('请先填写音频名称')
                    return;
                }else{
                    var audioId =$("[name=id]").val()
                    if(!verifyAudioTitle(audioTitle,audioId)){
                        util.layerMsgError('音频名称已存在')
                        return;
                    }
                }
                var files = document.getElementById("audioFile").files;
                var newFiles = new Array(1);
                newFiles[0] = files[0];
                var fileName = files[0].name;

                if (fileName.lastIndexOf(".mp3") < 0) {
                    util.layerMsgError("请正确上传.mp3格式的音频");
                    return;
                }
                cosUtil.opt.mainFolder = cosUtil.opt.mainFolder + audioTitle + "/";

                // 查看音频文件是否已经存在
                cosUtil.opt.onSuccess = function (file, result) {
                    layer.confirm('该音频文件已经存在, 确定要覆盖吗?', {icon: 3, title: '提示'}, function (index) {
                        layer.close(index);
                        uploadCert(newFiles);
                    });
                };
                cosUtil.opt.onFailure = function (file, result) {
                    uploadCert(newFiles);
                }
                cosUtil.getFileStat(newFiles[0]);

            });

            function uploadCert(newFiles) {
                debugger
                var loadIndex = top.layer.load(1, {
                    shade: [0.1, '#fff'] //0.1透明度的白色背景
                });

                // 上传附件
                cosUtil.opt.onSuccess = function (file, result) {
                    top.layer.close(loadIndex);
                    console.log(result.data)
                    $("#audioUrl").val(result.data.access_url);
                    util.layerMsgSuccess("音频文件上传成功");
                    console.log(result);
                };
                cosUtil.opt.onFailure = function (file, result) {
                    top.layer.close(loadIndex);
                    util.layerMsgError("音频文件上传失败");
                    console.log(result);
                }
                cosUtil.uploadFile(newFiles);
            }

            function verifyAudioTitle(value, id) {
                var isRepeat = false;
                $.ajax({
                    url: '${ctx}/audio/verifyAudioTitle.do',
                    type: 'POST',
                    dataType: 'json',
                    async: false, // 使用同步的方法
                    data: {
                        audioTitle: value,
                        id: id
                    },
                    success: function (data) {
                        isRepeat = data.success;

                    }
                });
                return isRepeat;
            }
        });
    })
</script>
<script type="text/javascript">
    txz.initHeader({
        nav: [{
            name: '套餐管理',
            href: '${ctx}/audio/audioList.do'
        }, {
            name: '${audio == null ? '添加' : '编辑'}音频',
            curr: true
        }],
        btns: [{
            name: '返回',
            href: '${ctx}/audio/audioList.do',
            icon: 'back'
        }]
    });
</script>
</body>
</html>